import React, { Component } from 'react';
import './service.scss'
import banner from '../../static/banner.png'
class Service extends Component {
    constructor(props) {
        super(props);
        this.state = {value:"服务卡"};
        
        this.handleChange = this.handleChange.bind(this);
    }
    handleChange(event) {
        this.setState({value: event.target.value});
    }
    render() {
        return (
            <div className="box">
                <div className="top">
                    <div>
                    <img src={banner}/>
                    <p>使用时出示，此码</p>
                    </div>
                </div>
                <div className="choice">
                    <select value={this.state.value} onChange={this.handleChange}>
                        <option value="0">服务卡</option>
                        <option value="1">礼品卡</option>
                    </select>
            </div>
            <div className="bottom">
                    <div className="status">
                        <p>未使用</p>
                        <p>已使用</p>
                        <p>已过期</p>
                    </div>
                    <div className="date">
                        <div>
                        <p>洗车卡</p>
                        <p>有效期至2020.02.21</p>
                        </div>
                    </div>
                    <div className="date">
                        <div>
                        <p>洗车卡</p>
                        <p>有效期至2020.02.21</p>
                        </div>
                    </div>
                    <div className="date">
                        <div>
                        <p>洗车卡</p>
                        <p>有效期至2020.02.21</p>
                        </div>
                    </div>
            </div>
            </div>
        );
    }
}

export default Service;